<template>
    <div ref="chartNode" class="main">


    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
// import * as echarts from 'echarts/core';
// // 引入柱状图图表，图表后缀都为 Chart
// import { BarChart } from 'echarts/charts';
// // 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
// import {
//     TitleComponent,
//     TooltipComponent,
//     GridComponent,
//     DatasetComponent,
//     TransformComponent
// } from 'echarts/components';
// // 标签自动布局、全局过渡动画等特性
// import { LabelLayout, UniversalTransition } from 'echarts/features';
// // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
// import { CanvasRenderer } from 'echarts/renderers';

// // 注册必须的组件
// echarts.use([
//     TitleComponent,
//     TooltipComponent,
//     GridComponent,
//     DatasetComponent,
//     TransformComponent,
//     BarChart,
//     LabelLayout,
//     UniversalTransition,
//     CanvasRenderer
// ]);
const chartNode = ref(null);

function getDatesOfMonth() {
    var currentDate = new Date();
    var year = currentDate.getFullYear();
    var month = currentDate.getMonth() + 1;
    var daysInMonth = new Date(year, month, 0).getDate();
    var dates = [];

    for (var i = 1; i <= daysInMonth; i++) {
        dates.push(new Date(year, month - 1, i));
    }

    return dates;
}
onMounted(() => {
    let myChart = echarts.init(chartNode.value);
    myChart.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: getDatesOfMonth().map(item => {
                    var month = ("0" + (item.getMonth() + 1)).slice(-2); //月
                    var day = ("0" + item.getDate()).slice(-2); //日
                    var mydate = month + "月" + day + "日";
                    return mydate
                }),
                axisLabel: {
                    interval: 0, // 显示所有标签
                    // rotate: 45 // 调整倾斜角度
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '用餐人次',
                data: [3327, 3959, 4346, 4378, 4451, 4248, 4225, 2612, 3592, 4095, 4314, 4437, 4357],
                type: 'line',
                label: {
                    show: true
                },
                color: '#D5DEEE'
            },
            {
                name: '菜款盈亏金额',
                stack: 'a',
                label: {
                    show: true
                },
                data: [175.4, 281.21, 390.91, -248, -270.50, -341.98, -192.00, -230.60, 383.05, 163.35].map(item => {
                    return item.toFixed(2)
                }),
                type: 'bar',
                color: '#6DE55E'
            },
            {
                name: '点心金额',
                stack: 'a',
                label: {
                    show: true
                },
                data: [-4782, -6063, -6342, -6345, -6366, -6367, -6213, -2445, -5943, -6063, -6123, -6204, -6240],
                type: 'bar',
                color: '#FFB200'
            }
        ]
    });
})


</script>
<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100%;
}
</style>